<template>
  <a-row>
    <a-col :span="12">
      <div>
        <div>
          <ChildVue>传递插槽的内容</ChildVue>
          <!-- 在父组件中定义的变量只能访问父组件中的内容 -->
          <ChildVue>{{ who }}</ChildVue>
          <!-- 父组件什么都不提供，则子组件会显示默认内容 -->
          <ChildVue></ChildVue>
        </div>
        <a-divider></a-divider>
        <div>
          <BaseLayout>
            <template v-slot:header>
              <!-- header 插槽的内容放这里 -->
              header
            </template>
            <template v-slot:default>
              <!-- main 插槽的内容放这里 -->
              main
            </template>
            <template v-slot:footer>
              <!-- header 插槽的内容放这里 -->
              footer
            </template>
          </BaseLayout>
        </div>
        <a-divider></a-divider>
        <div>
          <BaseLayout>
            <!-- 可以使用 # 代替 v-slot -->
            <template #header> header </template>
            <template #default> main </template>
            <template #footer> footer </template>
          </BaseLayout>
        </div>
        <a-divider></a-divider>
        <div>
          <BaseLayout>
            <!-- 当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。所以上面也可以写成 -->
            <template #header> header </template>
            main
            <div>非顶级的，多个标签，都会进入默认插槽</div>
            <template #footer> footer </template>
          </BaseLayout>
        </div>
        <a-divider></a-divider>
        <div>
          <BaseLayout>
            <!-- 支持动态插槽名 -->
            <template #[header]> header </template>
            <div>
              <a-button
                type="primart"
                @click="[this.header, this.footer] = [this.footer, this.header]"
                >切换</a-button
              >
            </div>
            <template #[footer]> footer </template>
          </BaseLayout>
        </div>
      </div>
    </a-col>
    <a-col :span="12">
      <!-- 父子组件获取子组件传递过来的值 -->
      <ChildVue v-slot="slotProps">
        {{ slotProps.username }}·{{ slotProps.year }}
      </ChildVue>
      <!-- 使用解构的方式获取 -->
      <ChildVue v-slot="{ username, year }">
        {{ username }}·{{ year }}
      </ChildVue>
      <a-divider></a-divider>
      <!-- 具名插槽也可以传递 -->
      <BaseLayout>
        <template #header="{ username }">
          {{ username }}
        </template>
        <template #default>
          <!-- 插槽传递的数据也是有作用于的，不同作用域的插槽的对象不能混用 -->
          <!-- {{ username }} -->
        </template>
        <template #footer> </template>
      </BaseLayout>
      <a-divider></a-divider>
      <!-- 我们希望它能够保留足够的灵活性，将对单个列表元素内容和样式的控制权留给使用它的父组件 -->
      <LiListVue>
        <template #item="{ body, username, likes }">
          <div class="item">
            <p>{{ body }}</p>
            <p>by {{ username }} | {{ likes }} likes</p>
          </div>
        </template>
      </LiListVue>
      <a-divider></a-divider>
      <!-- 无渲染组件，不需要渲染，只负责逻辑处理 -->
      <MouseTracker v-slot="{ x, y }">
        Mouse is at: {{ x }}, {{ y }}
      </MouseTracker>
    </a-col>
  </a-row>
</template>

<script>
import ChildVue from "./ChildVue.vue";
import BaseLayout from "./BaseLayout.vue";
import LiListVue from "./LiListVue.vue";
import MouseTracker from "./MouseTracker.vue";
export default {
  components: {
    ChildVue,
    BaseLayout,
    LiListVue,
    MouseTracker,
  },
  data() {
    return {
      who: "I am paremt",
      footer: "footer",
      header: "header",
    };
  },
};
</script>

<style></style>
